<template>
  <div>
    <el-container>
      <el-header>
        <div class="header">
         
        </div>
           
      </el-header>
      <el-main>
            <el-table  :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="name" align="center" label="姓名"  width="200">
            </el-table-column>

            <el-table-column prop="level" align="center" label="职务" width="200">
            </el-table-column>
          
             <el-table-column label="点选人员去向" align="center" width="500">
                <template slot-scope="scope">
                    
                    <el-button type="primary" size="small" round v-if="scope.row.meeting">开会</el-button>
                    <el-button @click="putedit(scope.row.id,1,0,0,0)" type="info" size="small" round v-else>开会</el-button>

                    <el-button type="warning" size="small" round v-if="scope.row.trip">出差</el-button>
                    <el-button @click="putedit(scope.row.id,0,1,0,0)" type="info" size="small" round v-else>出差</el-button>

                    <el-button type="danger" size="small" round v-if="scope.row.offwork">请假</el-button>
                    <el-button @click="putedit(scope.row.id,0,0,1,0)" type="info" size="small" round v-else>请假</el-button>

                    <el-button type="success" size="small" round v-if="scope.row.holiday">休假</el-button>
                    <el-button @click="putedit(scope.row.id,0,0,0,1)" type="info" size="small" round v-else>休假</el-button>

                     <el-button  size="small" round v-if="scope.row.holiday == 0 && scope.row.offwork == 0 && scope.row.trip == 0 && scope.row.meeting == 0">销假</el-button>
                    <el-button @click="putedit(scope.row.id,0,0,0,0)" type="info" size="small" round v-else>销假</el-button>
                </template>
            </el-table-column>

            <el-table-column label="编辑" align="center" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="small" round @click="handleClick1(scope.row)"></el-button>
                   
                </template>
             </el-table-column>
          </el-table>
           <!-- 分页 -->
                <el-pagination
                  background
                  :page-size="paging.per_page"
                  :pager-count="11"
                  layout="prev, pager, next"
                  :total="paging.total"
                  align="center"
                  @current-change="handleCurrentChange"
                  >
                </el-pagination>

                <el-dialog
                        title="编辑"
                        :visible.sync="dialogVisible"
                        width="400px"
                        :before-close="handleClose">
                        <putstate :putId="putId" v-on:dialogVisible="dialogVisible = false"></putstate>
                    </el-dialog>
    </el-main>
    </el-container>

  </div>
</template>

<script>
import { lists, edit } from "../../api/api";
import putstate from './putstate'
export default {
  created() {
    this.getlists();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    getlists(per) {
      lists(per).then(res => {
        this.paging = res.data;
        this.tableData = res.data.data;
      });
    },
    handleCurrentChange(val) {
      //分页
      this.getlists(val);
    },
    putedit(id, meeting, trip, offwork, holiday) {
      edit(id, meeting, trip, offwork, holiday).then(res => {
        if (res.data == 1) {
          this.getlists();
        }
      });
    },
     handleClick1(row) {
      this.dialogVisible = true;
      this.putId = row;
    },
     handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  data() {
    return {
      tableData: [],
      paging: {},
      dialogVisible: false,
      dialogVisible1: false,
      putId:'',
      formLabelWidth: "50px"
    };
  },
  components:{
    putstate
  }
};
</script>


<style lang="scss" scoped>
body {
  margin: 0px;
  padding: 0px;
  /*background: url(assets/bg1.jpg) center !important;
		background-size: cover;*/
  // background: #1F2D3D;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.el-header,
.el-footer {
  color: #333;
  overflow: hidden;
  padding-top: 20px;
  display: none;
}
.header {
  position: relative;
  width: 500px;
}
.search {
  width: 300px;
  height: 38px;
  border-radius: 50px;
  overflow: hidden;
}

.time {
  width: 160px;
  border-radius: 35px;
  overflow: hidden;
  input {
    border: none;
  }
}

.btn {
  overflow: hidden;
  display: block;
  margin-bottom: 10px;
  position: absolute;
  top: 0;
  right: -70px;
}

.el-main {
  // background-color: #fff;
  color: #000;
  margin: 0;
  padding: 0;
  margin-top: 30px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>

